<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
</head>
<body>

<div id="vis"></div>

{{#if clients}}
<h3>Clients</h3>
<ul>
  {{#each clients}}
    <li><a href="#{{this}}/clients.json">{{this}}</a></li>
  {{/each}}
</ul>
{{/if}}

{{#if servers}}
<h3>Servers</h3>
<ul>
  {{#each servers}}
    <li><a href="#{{this}}/servers.json">{{this}}</a></li>
  {{/each}}
</ul>
{{/if}}

<script type="text/javascript">
  function onChange() {
    var spec = window.location.hash.replace(/^#/, '');
    if (spec) vegaEmbed('#vis', spec).catch(console.error);
  }

  onChange();
  window.onhashchange = onChange;
</script>
<style>
  body {
    box-sizing: border-box;
    font-family: sans-serif;
    padding: 20px;
  }

  .vega-bind-name {
    display: inline-block;
    min-width: 250px;
  }
</style>
</body>
</html>
